<template>
  <view class="detail-container">
    <!-- 轮播图 -->
    <swiper class="swiper" circular :autoplay="true" :interval="3000" :indicator-dots="true" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
      <swiper-item v-for="(item, index) in houseDetail.images" :key="index">
        <image :src="item" mode="aspectFill"></image>
        <view class="image-count">{{index + 1}}/{{houseDetail.images.length}}</view>
      </swiper-item>
    </swiper>
    
    <!-- 基本信息 -->
    <view class="basic-info">
      <view class="price">
        <text class="number">{{houseDetail.price}}</text>
        <text class="unit">元/月</text>
        <text class="payment-type">{{houseDetail.paymentType}}</text>
      </view>
      <view class="title">{{houseDetail.title}}</view>
      <view class="tags">
        <text v-for="(tag, index) in houseDetail.tags" :key="index">{{tag}}</text>
      </view>
      <view class="update-time">{{houseDetail.updateTime}}更新</view>
    </view>
    
    <!-- 房屋信息 -->
    <view class="house-info">
      <view class="info-title">房屋信息</view>
      <view class="info-item">
        <text class="label">房屋类型</text>
        <text class="value">{{houseDetail.houseType}}</text>
      </view>
      <view class="info-item">
        <text class="label">面积</text>
        <text class="value">{{houseDetail.area}}㎡</text>
      </view>
      <view class="info-item">
        <text class="label">朝向</text>
        <text class="value">{{houseDetail.orientation}}</text>
      </view>
      <view class="info-item">
        <text class="label">楼层</text>
        <text class="value">{{houseDetail.floor}}</text>
      </view>
    </view>
    
    <!-- 位置信息 -->
    <view class="location-info">
      <view class="info-title">
        <text>小区位置</text>
        <view class="more" @tap="openMap">
          <text>查看地图</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="location-detail">
        <view class="community">
          <text>{{houseDetail.community}}</text>
          <text class="distance">{{houseDetail.distance}}</text>
        </view>
        <text class="address">{{houseDetail.address}}</text>
      </view>
      <!-- 添加地图组件 -->
      <map class="map" 
        :latitude="location.latitude" 
        :longitude="location.longitude"
        :markers="markers"
        scale="16"
        @markertap="navigateToMap">
      </map>
    </view>
    
    <!-- 房源描述 -->
    <view class="description">
      <view class="info-title">房源描述</view>
      <text class="desc-text">{{houseDetail.description}}</text>
    </view>
    
    <!-- 房东信息 -->
    <view class="landlord-info">
      <image class="avatar" :src="houseDetail.landlord.avatar" mode="aspectFill"></image>
      <view class="landlord-detail">
        <view class="name">
          {{houseDetail.landlord.name}}
          <text class="auth-tag" v-if="houseDetail.landlord.isAuth">已认证</text>
        </view>
        <view class="identity">{{houseDetail.landlord.identity}}</view>
      </view>
      <view class="contact-btn">
        <uni-icons type="phone-filled" size="16" color="#ff552e"></uni-icons>
        <text>联系房东</text>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-btn collect">
        <uni-icons :type="isCollected ? 'star-filled' : 'star'" :color="isCollected ? '#ff552e' : '#999'" size="20"></uni-icons>
        <text>收藏</text>
      </view>
      <view class="action-btn share">
        <uni-icons type="redo" size="20" color="#999"></uni-icons>
        <text>分享</text>
      </view>
      <button class="contact">在线咨询</button>
      <button class="phone" @tap="makePhoneCall">电话联系</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const houseDetail = ref({
  images: [
    'https://pic1.58cdn.com.cn/anjuke_58/2ee7265822088a7c6a3b2c9cc1f7e7c0',
    'https://pic2.58cdn.com.cn/anjuke_58/2ee7265822088a7c6a3b2c9cc1f7e7c0',
    'https://pic3.58cdn.com.cn/anjuke_58/2ee7265822088a7c6a3b2c9cc1f7e7c0'
  ],
  price: '3800',
  title: '整租·望京SOHO 2室1厅 南北通透',
  tags: ['随时看房', '押一付一', '精装修', '近地铁'],
  houseType: '2室1厅1卫',
  area: '89',
  orientation: '南北通透',
  floor: '中层/18层',
  community: '望京SOHO',
  distance: '距离14号线望京站步行290米',
  address: '朝阳区望京街道望京SOHO',
  description: '房屋是精装修，家具家电齐全，拎包入住。采光好，视野开阔，周边配套设施齐全，交通便利。押一付一，无中介费。',
  landlord: {
    avatar: 'https://pic1.58cdn.com.cn/nowater/fangfe/n_v2d0440d85683b45b5b7e11a5b6ea768c5.jpg',
    name: '张先生',
    identity: '个人房源',
    isAuth: true
  },
  paymentType: '押一付三',
  updateTime: '今天'
})

const isCollected = ref(false)

const makePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: '10000000000'
  })
}

// 添加位置相关数据
const location = ref({
  latitude: 39.993120,  // 望京SOHO的大致坐标
  longitude: 116.467490
})

// 地图标记点
const markers = ref([
  {
    id: 1,
    latitude: location.value.latitude,
    longitude: location.value.longitude,
    title: houseDetail.value.community,
    iconPath: '/static/images/marker.png', // 需要添加地图标记图标
    width: 32,
    height: 32
  }
])

// 打开地图页面
const openMap = () => {
  uni.navigateTo({
    url: `/pages/map/map?latitude=${location.value.latitude}&longitude=${location.value.longitude}&name=${houseDetail.value.community}&address=${houseDetail.value.address}`
  })
}

// 点击标记点打开导航
const navigateToMap = () => {
  uni.getLocation({
    type: 'gcj02',
    success: function(res) {
      uni.openLocation({
        latitude: location.value.latitude,
        longitude: location.value.longitude,
        name: houseDetail.value.community,
        address: houseDetail.value.address,
        scale: 18
      })
    },
    fail: function() {
      uni.showToast({
        title: '获取位置失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.detail-container {
  padding-bottom: 120rpx;
}

.swiper {
  width: 100%;
  height: 500rpx;
}

.swiper image {
  width: 100%;
  height: 100%;
}

.basic-info {
  padding: 30rpx;
  background: #fff;
}

.price {
  margin-bottom: 20rpx;
}

.price .number {
  font-size: 40rpx;
  color: #ff552e;
  font-weight: bold;
}

.price .unit {
  font-size: 28rpx;
  color: #ff552e;
  margin-left: 10rpx;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tags text {
  font-size: 22rpx;
  color: #ff552e;
  background: rgba(255,85,46,.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
}

.house-info {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  width: 50%;
  margin-bottom: 30rpx;
}

.info-item .label {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.info-item .value {
  font-size: 30rpx;
  color: #333;
}

.location-info {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 30rpx;
}

.location-detail {
  margin-bottom: 20rpx;
}

.community {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.community text {
  font-size: 30rpx;
  color: #333;
}

.distance {
  font-size: 26rpx;
  color: #999;
}

.address {
  font-size: 26rpx;
  color: #666;
}

.map {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.description {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.landlord-info {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.landlord-detail {
  flex: 1;
}

.landlord-detail .name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.landlord-detail .identity {
  font-size: 26rpx;
  color: #999;
}

.contact-btn {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #ff552e;
  border: 2rpx solid #ff552e;
  border-radius: 30rpx;
  background: #fff;
}

.contact-btn uni-icons {
  margin-right: 6rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
}

.action-btn text {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}

.contact, .phone {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
  font-weight: 500;
}

.contact {
  background: rgba(255,85,46,.1);
  color: #ff552e;
}

.phone {
  background: #ff552e;
  color: #fff;
}

.phone:active {
  opacity: 0.9;
}

.contact:active {
  background: rgba(255,85,46,0.15);
}

.image-count {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.payment-type {
  font-size: 24rpx;
  color: #666;
  margin-left: 20rpx;
}

.update-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}

.info-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.more {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
  font-weight: normal;
}

.auth-tag {
  font-size: 22rpx;
  color: #07c160;
  background: rgba(7,193,96,0.1);
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  margin-left: 12rpx;
  font-weight: normal;
}
</style> 